@extends('layout.master')

@section('content-header')
    <h1>Lokasi</h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="active"><i class="fa fa-map-marker"></i>Lokasi</li>
    </ol>
@stop

@section('content')
<!-- Modal -->
<div class="modal fade modal-wide" id="detail-lokasi-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Detail Lokasi</h4>
            </div>

            <div class="modal-body">

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Tutup</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
            </div>
            <div id="map-placer" style="display: none;">
                <a href="#" class="pull-right"><i class="fa fa-times-circle fa-lg"></i></a>
                <div id="mapPopOver" class="map_canvas"></div>
                <input type="text" id="latFld" class="hidden" value="">
                <input type="text" id="lngFld" class="hidden" value="">
            </div>
            <div class="box-body table-responsive">

                <a class="btn btn-primary" href="{{ URL::route('lokasis.create') }}"><i class="fa fa-plus-square"></i> Tambah Lokasi</a>
                <a class="btn btn-warning" href="{{ URL::route('lokasis.gis') }}"><i class="fa fa-search"></i> Pencarian</a>

                <br><br>

                <table id="my-table" class="table table-bordered table-hover table-lokasi">
                    <thead>
                        <tr class="center">
                            <th width="10%">#</th>
                            <th>Nama</th>
                            <th>Lat | Lng</th>
                            <th>Tipe</th>
                            <th>Alamat</th>
                            <th>Keterangan</th>
                            <th>Pemilik</th>
                            <th width="15%">Action</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div><!-- /.box-body -->
        </div><!-- /.box -->
    </div>
</div>


<!-- Modal -->
<div class="modal fade modal-wide" id="kk-penduduks-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Kartu Keluarga</h4>
            </div>

            <div class="modal-body">

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Tutup</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

@stop

@section('javascript')
<script type="text/javascript">
    var polygonCoords       = [];
    var markersPopoverArray = [];
    var global_lat_lng;

    function initialize_map_popover(id_map, lat_lng) {
        var lat_lng = lat_lng.split('|');

        var map_canvas = document.getElementById(id_map);
        var map_options = {
            center: new google.maps.LatLng( {{ $lingkungan['lat_lng'][0] }}, {{ $lingkungan['lat_lng'][1] }} ),
            zoom: {{ isset($lingkungan['zoom']) ? $lingkungan['zoom'] : '18';  }},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options);

        // get polygon data
        var promise = $.getJSON("{{ URL::route('lingkungan.get.polygon.json') }}");
        promise.done(function(coordinates){
            for (var key in coordinates) {
                var lat_lng = coordinates[key];
                polygonCoords.push(new google.maps.LatLng(lat_lng.lat, lat_lng.lng));
            }

            if(polygonCoords.length > 0) {
                var polygon = new google.maps.Polygon({
                    paths: polygonCoords
                });
                polygon.setMap(map);
            }
        });

        // Add marker
        var location = new google.maps.LatLng(lat_lng[0], lat_lng[1]);
        map.setCenter(new google.maps.LatLng(lat_lng[0], lat_lng[1]));

        var marker = new google.maps.Marker({
            position: location,
            draggable: true,
            map: map
        });

        google.maps.event.addListener(marker, 'dragend', function()
        {
            $('#latFld').val( marker.getPosition().d );
            $('#lngFld').val( marker.getPosition().e );
        });
    }

    $(function() {
        // Data table init
        var dataTable = $('#my-table').dataTable({
            "aoColumns": [
                { "bSearchable": true, "bSortable": true, "bVisible": false },
                { "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": true, "bVisible": false },
                { "sClass": "text-center", "bSearchable": true, "bSortable": true },
                { "bSearchable": true, "bSortable": false },
                { "bSearchable": true, "bSortable": false },
                { "bSearchable": true, "bSortable": true },
                { "sClass": "text-center", "bSearchable": true, "bSortable": false }
            ],
            "aLengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "{{ URL::route('lokasis.datatable') }}",
            "bPaginate": true,
            "bSort": true,
            "bAutoWidth": false,
            "fnServerData": function( sSource, aoData, fnCallback ){

                $.getJSON( sSource, aoData, function (json) {
                    fnCallback(json);

                    $('.btn-tooltip').tooltip();
                });
            }
        });

        // Delete button
        $('#my-table').on('click', '.btn-delete', function(event) {
            event.preventDefault();

            var url = $(this).attr('href');

            bootbox.confirm('Yakin hapus data ini?', function(yes){
                if(yes) {
                    var promise =  $.ajax({
                        url: url,
                        type: 'delete',
                        success: function(data) {
                        }
                    });

                    promise.done(function(){
                        dataTable.fnReloadAjax();
                    });
                }
            });
        });

        $('#my-table').on('click', '.btn-detail', function(event) {
            event.preventDefault();

            var url = $(this).attr('href');
            var row = $(this).parents('tr')[0];
            global_lat_lng = $(row).find('td:first').find('.btn-map').data('lat_lng');

            $('#detail-lokasi-modal').modal('show');
            showLoader($('#detail-lokasi-modal').find('.modal-body'));

            var promise = $.ajax({
                url: url,
                type: 'get'
            });
            promise.done(function(data){
                $('#detail-lokasi-modal').find('.modal-body').html(data);
            });
        });

        /**
         * On modal detail shown load the initalize google map
         */
        $('#detail-lokasi-modal').on('shown.bs.modal', function (e) {
            initialize_map_popover('mapModal', global_lat_lng);
        });

        $('#my-table').on('click', '.btn-map', function(event) {
            event.preventDefault();

            var lat_lng = $(this).data('lat_lng');
            $('#map-placer').show('400', function() {
                initialize_map_popover('mapPopOver', lat_lng);
            });
        });

        $('#map-placer a').click(function(event) {
            event.preventDefault();

            $('#map-placer').hide('400');
        });

        $('#detail-lokasi-modal').on('click', '.btn-no-kk', function(event) {
            event.preventDefault();

            var no_kk = $(this).html();
            var promise =  $.ajax({
                url: "{{ URL::route('penduduks.perkk') }}",
                type: 'post',
                data: {
                    no_kk: no_kk
                }
            });

            promise.done(function(data){
                $('#kk-penduduks-modal').find('.modal-body').html(data);
                $('#kk-penduduks-modal').modal('show');
            });
        });
    });
</script>
@stop